<template>
  <div id="ProductInfoDetails">
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">基础数据</strong></a>
          <span>/</span>
        </li>
        <li><strong>产品信息管理</strong><span>/</span></li>
        <li><strong>产品信息详情</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">
        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>产品信息详情</h2>
          <hr>
        </div>
        <div style="margin: 0px 20px 40px 20px">
          <el-radio-group v-model="size">
            <el-radio label="">默认</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="small">小型</el-radio>
            <el-radio label="mini">超小</el-radio>
          </el-radio-group>
          <el-descriptions style="margin-top: 20px" class="margin-top" :title="product.productSeries + product.productModel" :column="2" :size="size" border>
            <el-descriptions-item>
              <template slot="label">
                产品编号
              </template>
              {{product.productId}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                产品类型
              </template>
              {{product.productType}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                产品系列
              </template>
              {{ product.productSeries }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                产品型号
              </template>
              {{ product.productModel }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                产品价格
              </template>
              {{ product.productPrices }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                产品批次
              </template>
              {{ product.productBatch }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                产品单位
              </template>
              {{ product.productUnit }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                产品详细参数地址
              </template>
              <a :href="product.productUrl">{{product.productSeries}}{{product.productModel}}数据评测</a>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                产品备注
              </template>
              {{product.productRemarks}}
            </el-descriptions-item>
          </el-descriptions>

        </div>
        <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
          <router-link to="ProductInfoList" class="btn btn-default">返回</router-link>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "ProductInfoDetails",
  data(){
    return{
      product:{},
      size: ''
    }
  },
  methods:{
    loadProduct(){
      this.$axios.get("/product/loadProductById",{
        params:{
          productId:this.$route.query.productId
        }
      }).then(
        res=>{
          this.product=res.data.data
          // console.log(res.data.data)
        }
      )
    }
  },
  created() {
    this.loadProduct()
  }
}
</script>

<style scoped>
.the_title_style{
  /*height:55px;*/
  background-color: #CDCDCD;
  padding: 10px 0px
}
.the_content_style{
  /*height:55px;*/
  background-color: #EAEAEA;
  padding: 10px 0px
}
</style>
